<html>
<head>
  <meta charset="utf-8">
  <title>Test Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <!--   <link rel="stylesheet" type="text/css" href="css/color.css"> -->
  <link rel="stylesheet" type="text/css" href="css/mycss.css">
  <link rel="icon" type="image/x-icon" href="image/logo.png">
  <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  function clickCaret(){
    if($(".user .dropdown-menu").hasClass("show")){
      $(".user .dropdown-menu").removeClass("show");
    }else{
      $(".user .dropdown-menu").addClass("show");
    }
  }
  </script>
  <script type="text/javascript">
  function checkValidUsername(username){
    var regex = new RegExp("^[-\\w\\.\\$@\\*\\!]{3,30}$");
    return regex.test(username);
  }
  function checkValidPassword(password){
    var regex = new RegExp("^.{6,30}$");
    return regex.test(password);
  }

  function checkValidLogin(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if(!checkValidUsername(username)){
      document.getElementById("invalid-username").classList.remove("hidden");
        //$("#invalid-username").removeClass("hidden");
        console.log("username");
        return false;
      }else{
        if(!document.getElementById("invalid-username").classList.contains("hidden")){
          document.getElementById("invalid-username").classList.add("hidden");
        }
      }

      if(!checkValidPassword(password)){
        document.getElementById("invalid-password").classList.remove("hidden");
        document.getElementById("forgot-password").classList.remove("hidden");
        //$("#invalid-password").removeClass("hidden");
        console.log("password");
        return false;
      }else{
        if(!document.getElementById("invalid-password").classList.contains("hidden")){
          document.getElementById("invalid-password").classList.add("hidden");
          document.getElementById("forgot-password").classList.add("hidden");
        }
      }

      return true;
    }   
    </script>
  </head>
  <body>
   <header>
    <div class="container">
      <div class="row logo-user">
       <div><a href="#"><img src="image/banner_600.png" class="logo"></a></div>
       <div class="user">
        <!-- <div>Welcome <a href="#" class="welcome">Guest</a></div> -->
        <div class="dropdown" style="float: right"><label style="color: #8a6d3b;">Xin chào</label> 
          <a href="#" class="welcome btn btn-warning btn-xs">Henry Thanh Hai</a>
          <span onclick="clickCaret()" class="btn btn-warning btn-xs caret-click">
            <b class="caret"></b>
          </span>
          <ul class="dropdown-menu hide" style="margin-left: 55px;">
            <li><a href="#">Thông tin</a></li>
            <li><a href="#">Tùy chỉnh</a></li>
            <li><a href="#">Đổi mật khẩu</a></li>
          </ul>
        </div>
        <div ="row">
          <div class="reg-log">
            <a href="#" class="btn btn-sm btn-login">Đăng Nhập</a>
            <a href="#" class="btn btn-sm btn-register">Đăng Ký</a>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <nav class="navbar navbar-orange" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand navbar-home" href="#"><span class="glyphicon glyphicon-home"></span></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Giải Đề</a></li>
            <li><a href="#">Hỏi Đáp</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle">Tài Nguyên <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Môn học</a></li>
                <li><a href="#">Đề thi</a></li>
                <li><a href="#">Bài kiểm tra</a></li>
<!--           <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li> -->
        </ul>

      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle">Trợ Giúp <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Trợ Giúp</a></li>
          <li><a href="#">Đề thi</a></li>
          <li><a href="#">Bài kiểm tra</a></li>
        </ul>
      </li>
      <li><a href="#">Về Chúng Tôi</a></li>
    </ul>
    <!-- <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form> -->
    <!-- <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul> -->
  </div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</header>

<div class="container">
  <div class="row">
    <div class=" login login-warning col-md-4 col-md-offset-4 col-xs-8 col-xs-offset-2">
      <div class="login-heading">
        <h3 class="login-title">Login</h3>
      </div>
      <div class="login-body">
        <form class="form-horizontal" role="form" onsubmit="return checkValidLogin()">
          <!-- <p class="invalid-mess text-center">Invalid username or password</p> -->
          <div class="form-group">
            <label class="col-md-3 control-label">Username</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="username" placeholder="Username">
            </div>
          </div>
            <div class="col-md-offset-4">
              <p class="invalid-mess hidden" id="invalid-username">Invalid username!</p>
            </div>
          <div class="form-group">
            <label class="col-md-3 control-label">Password</label>
            <div class="col-md-9">
              <input type="password" class="form-control" id="password" placeholder="Password">
            </div>
          </div>
            <div class="col-md-offset-4">
              <p class="invalid-mess hidden" id="invalid-password">Invalid password!</p>
              <a class="hidden" id="forgot-password" href="">Forgot your password?</a>
            </div>
          <div class="form-group">
            <div class="col-md-offset-4 col-md-3">
              <div class="checkbox">
                <label>
                  <a href="">Register</a>
                </label>
              </div>
            </div>
            <div class="col-md-3">
              <button type="submit" class="btn btn-success">Login</button>
            </div>
          </div>
        </form>
      </div>  
    </div>
  </div>  
</div>
<footer class="footer">
  <div class="container">
    <div class="website-info text-center">
      <h5>CungOnBai.com © 2014 - Website ôn thi hàng đầu Việt Nam</h5>
      <h6>QwerTy Group</h6>
    </div>
    <div class="row"></div>
  </div>
</footer>

</body>
</html>